.docks-hidden .rail {
  display: none !important;
}

.docks-hidden .workspace-frame {
  padding-left: 0;
  padding-right: 0;
}

body.device-phone .workspace-frame {
  padding: 10px 10px 120px;
}

body.device-phone .rail {
  display: none;
}

body.device-phone .canvas-wrapper {
  height: calc(100vh - 140px);
}

body.device-tablet .mobile-toolbar {
  display: none;
}

body.device-tablet .drawer {
  width: 360px;
  left: 92px;
  right: auto;
  bottom: auto;
  top: 96px;
  transform: translate(-6px, -140%);
}

body.device-tablet .drawer.is-active {
  transform: translate(0, 0);
}

body.device-tablet .palette-window {
  top: 96px;
}

@media (max-width: 820px) {
  .app-bar {
    grid-template-columns: 1fr;
  }

  .app-bar__actions {
    justify-content: center;
  }

  .rail-left {
    left: 12px;
  }

  .rail-right {
    right: 12px;
  }
}

@media (max-width: 520px) {
  .mobile-toolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 8px;
  }
}
